<script setup>
import { ref, defineProps } from 'vue'
import { addShoppingCartItemApi } from '@/apis/shopping.js'
import { useCartStore } from '@/store'
import { route, toast } from 'uview-plus'


const cartStore = useCartStore()
const prop = defineProps({
  goodsId: {
    type: Number,
    default: null
  }
})
const addCart = async () => {
  console.log(prop.goodsId);
  await addShoppingCartItemApi(prop.goodsId)
  cartStore.getCount(false)
  toast('加入购物车成功')
}


// 立即购买，将当前选择的商品生成一个一个订单项 order_item
const toBuy  = async  ()=>{
	route({
		url: '/pages/order/submitOrder',
		params:{
			goodsId: prop.goodsId
		}
	})
}
</script>

<template>


  <view class="navigation">
    <view class="left">
      <view class="item">
        <up-icon name="server-fill" :size="26" style="justify-content: center;"
          :color="$u.color['contentColor']"></up-icon>
        <view class="text u-line-1">客服</view>
      </view>
      <view class="item car" @click="route({ url: '/pages/shopping/index', type: 'tab' })">
        <view class="box">
          <up-badge class="car-num" type="error" :value="cartStore.count"></up-badge>
        </view>
        <up-icon style="justify-content: center;" name="shopping-cart" :size="26" :color="$u.color['contentColor']">
        </up-icon>
        <view class="text u-line-1">购物车</view>
      </view>
    </view>
    <view class="right">
      <view class="cart btn u-line-1" @click="addCart">加入购物车</view>
      <view class="buy btn u-line-1" @click="toBuy">立即购买</view>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.navigation {
  // 固定在底部
  position: fixed;
  bottom: 0;
  width: calc(100% - 32rpx);
  display: flex;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx;

  .left {
    flex: 2;
    display: flex;
    text-align: center;

    .item {
      flex: 1;
    }

    .car {
      position: relative;
      text-align: center;

      .car-num {
        position: absolute;
        top: -10rpx;
        right: -3rpx;
      }
    }
  }

  .right {
    flex: 5;
    display: flex;
    background-color: #7FCFD0;
    border-radius: 66rpx;

    .btn {
      flex: 1;
      color: #ffffff;
      text-align: center;
      line-height: 48px;
    }

    .cart,
    .buy {
      background: linear-gradient(to right, #86D4D6, #53ACAD);
    }

    .cart {
      border-top-left-radius: 66rpx;
      border-bottom-left-radius: 66rpx;
    }

    .buy {
      border-top-right-radius: 66rpx;
      border-bottom-right-radius: 66rpx;
    }
  }
}
</style>